<template>
  <li 
    :class="isActive? 'active' : '' "
    @mouseenter="isActive = true"
    @mouseleave="isActive = false"
  >
    <label>
      <input 
        type="checkbox" 
        :checked="todo.done"
        @click="signleChecked(todo.id)"
      />
      <span>{{todo.thing}}</span>
    </label>
    <button 
      class="btn btn-danger" 
      :style="{display: isActive? 'block' : 'none'}" 
      @click="signleDelete(todo.id)"
    >删除</button>
  </li>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Item",
});
</script>

<script setup lang="ts">
import {ref} from "vue"
import {defineProps} from "vue"

//定义数据动态控制样式
let isActive = ref(false)

import {todoListItemType} from "../../../App.vue"
interface propsType{
  todo: todoListItemType
  signleChecked(id:string): void
  signleDelete(id:string): void
}
const props = defineProps<propsType>()

</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li.active{
  background-color: #ccc;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
</style>
